import { map } from '@/utils/map';
import { ProFormCascader } from '@ant-design/pro-components';
import { useEffect, useState } from 'react';
export const CascaderCity = (props) => {
  const [provinces, setProvinces] = useState<any>([]);

  useEffect(() => {
    // 获取省份数据
    const fetchProvinces = async () => {
      let list: any[] = [];
      map.forEach((element: any) => {
        let cityList: any[] = [];
        if (element.children) {
          element.children.forEach((item: any) => {
            let areaList: any[] = [];
            if (item.children) {
              item.children.forEach((area: any) => {
                areaList.push({ value: area.name, label: area.name });
              });
            }
            cityList.push({ value: item.name, label: item.name, children: areaList });
          });
        }
        list.push({ value: element.name, label: element.name, children: cityList });
      });
      setProvinces(list);
    };
    fetchProvinces();
  }, []);

  return (
    <div>
      <ProFormCascader
        label={props.label}
        rules={[
          {
            required: props.required,
            message: '现居住地必填！',
          },
        ]}
        fieldProps={{
          options: provinces,
        }}
        name={props.name}
        placeholder={'请选择' + props.label}
      />
    </div>
  );
};
